<template>
    <div class="mytabs-container">
        <span 
        v-for="(item,index) of list" 
        class="item" 
        :class="{'selected':thisactive===index?true:false}" 
        @click="onChange(index)" 
        :key="index">
            {{item}}
        </span>
    </div>
</template>
<script>

export default {
    name:'MyTabs',
    props: {
        list:Array,
        active:Number,
        activechange:Function
    },
    data() {
        return {
            thisactive:0,
        }
    },
    created() {
        this.thisactive = this.active;
    },
    methods:{
        onChange(index) {
            if(index === this.thisactive) {
                return;
            }
            this.thisactive = index;
            this.$emit('activechange',index);
        }
    }
}
</script>
<style lang="less" scoped>
@import '../../css/var.less';
.mytabs-container {
    width: 100%;
    height: 40px;
    padding:5px 10px;
    box-sizing: border-box;
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    .item {
        display: inline-block;
        margin-right:35px;
        font-size:18px;
        font-weight: 600;
        padding-bottom:5px;
        border-bottom: 2px solid transparent;
    }
    .selected {
        color:@color;
        border-bottom: 2px solid @color;
    }
}
</style>